<template>
	<div class="index">

     <div class="part">
    <!--   <p class="part_tit">服务内容</p>
      <p class="part_line"></p> -->
      <div class="part_cont" v-html="info.content"></div>
     <!--  <p class="part_tit part_tit_two">注意事项</p>
      <p class="part_line"></p>
      <div class="part_cont" v-html="info.description"></div> -->
    </div>

		<div class="main">
			<ul class="tabTit">
				<li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
			</ul>
			<div class="tabCon">
				<div v-for="(itemCon,index) in tabContent0" v-if="tabContentShow == true" v-show="0 == num">
					<div class="list flex start_end" @click="toPartner(itemCon.uuid,itemCon.name)">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
        <div class="wait" v-if="tabContentShow == false" v-show="0 == num">
          您附近10公里没有小伙伴，敬请期待！
        </div>
				<div v-for="(itemCon,index) in tabContent1" v-show="1 == num">
					<div class="list flex start_end" @click="toPartner(itemCon.uuid,itemCon.name)">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
				<div v-for="(itemCon,index) in tabContent2" v-show="2 == num">
					<div class="list flex start_end" @click="toPartner(itemCon.uuid,itemCon.name)" v-if="itemCon.id">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
			</div>
		</div>

    <!-- 注意事项,同意 -->
    <div class="alert_out" v-if="care.code == 0"></div>
    <div class="alert" v-if="care.code == 0">
      <div class="alert_cont" v-html="info.content"></div>
      <div class="alert_sure">
        <input type="checkbox" id="checkbox" v-model="checked">
        <span>我已阅读并同意以上内容</span>
      </div>
      <div class="alert_btn flex">
        <!-- <button @click="careCancel">取消</button> -->
        <button :class="[checked==true?'alert_confirm':'']" @click="careSure" :disabled="!checked">确定</button>
      </div>
    </div>

    <!-- 更新经纬度 -->
    <lat-lng></lat-lng>
	</div>
</template>


<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  inject: ['reload'],
	data(){
		return {
      uuid: '',
      info: {},
			num: 0,
			tabs: ["按距离","按评分","服务过"],
			tabContent0:[],
			tabContent1:[],
			tabContent2:[],
      tabContentShow: true,
      carLength: '',
      addrLength: '',
			key: '',
      care: {},
      checked: false,
      carId: '0',
      addrId: '0',
		}
	},
	beforeMount(){
    
	},
  mounted() {
    // alert(this.$root.getUrlStr('service'));
    this.getInfo();
    this.$root.share();
  },
	methods: {
		tab(index) {
				this.num = index;
		},
    // 查看小伙伴详情
    toPartner(uuid,key){
      this.$router.push({
        name:'Partner',
        params: {
          uuid: uuid,
          key: key,
        }
      })
    },
    // 预约
    toConfirm(id,name,phone,uid){
      console.log("预约 —— 车辆获取");
      var that = this;
      var carid = that.carId;
      var addrid = that.addrId;
      var serviced = that.$root.getUrlStr('service');
      // var serviced = that.$route.params.service;

      // global.order.service = 1;
      if (that.carLength == 0 ) {
        alert("请先填写您的车辆信息！");
        that.$router.push({path:'/carlove'})
      } else if (that.care.code == 0 || that.care.code == -1) {
        that.care.code = 0
      } else {
        axios.get(global.api.index.appoint,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            uid: uid,
          }
        })
        .then(function(res){
          console.log("toConfirm then");
          console.log(res.data);
          if (res.data.data.code == 'success') {
            global.order.worker.id = id;
            global.order.worker.name = name;
            global.order.worker.phone = phone;
            global.order.first = true;

            window.location.href = '/#/Confirm?wid='+id+'&service='+serviced;
            // window.location.href = 'https://localhost:8080#/Confirm?wid='+id+'&service='+serviced;
            // location.href='https://localhost:8080/#/Confirm?wid='+id+'&service=2';
            // that.$router.push({path:'/Confirm'})                    
          } else {
            alert(res.data.data.msg);
          }
        })
        .catch(function(res){
          console.log("toConfirm catch");
          console.log(res);
        })
      }
    },
    // 接口
    getInfo(){
      var that = this;
      var serviced = that.$root.getUrlStr('service');
      // var serviced = that.$route.params.service;

      axios.all([
        axios.get(global.api.index.search,{  //按距离
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 0,
          }
        }),
        axios.get(global.api.index.search,{  //按评分
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 1,
          }
        }),
        axios.get(global.api.index.search,{  //按服务过
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 2,
          }
        }),
        axios.get(global.api.carMine.car,{  //车子数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.address.myAddress,{  //地址数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.index.servceDetail,{  //服务列表详情
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            id: serviced,
          }
        }),
        axios.get(global.api.index.care,{  //注意事项
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            status: serviced,
          }
        }),
      ])
      .then(axios.spread(function(tabContent0,tabContent1,tabContent2,car,addr,info,care){
        // console.log("getInfo then");
        // console.log(tabContent0.data.data);
        // console.log(tabContent1.data.data);
        // console.log(tabContent2.data.data);
        // console.log(car.data.data.length);
        // console.log(addr.data.data.length);
        // console.log(info.data);
        // console.log(care.data);
        if (tabContent0.data.data.length > 0) {
          that.tabContent0 = tabContent0.data.data;
        } else {
          that.tabContentShow = false;
        }
        
        that.tabContent1 = tabContent1.data.data;
        that.tabContent2 = tabContent2.data.data;
        that.carLength = car.data.data.length;
        that.addrLength = addr.data.data.length;
        that.info = info.data.data;
        that.care = care.data.data;

        for (var i=0;i<car.data.data.length;i++) {

          if (car.data.data[i].is_default == 1) {
            global.order.car.id = car.data.data[i].id;
            that.carId = car.data.data[i].id;
            sessionStorage.setItem('carId', car.data.data[i].id);
            // alert(sessionStorage.getItem('carId'));
          }
        }

        for (var j=0;j<addr.data.data.length;j++) {

          if (addr.data.data[j].is_default == 1) {
            console.log(addr.data.data[j].id);
            global.order.addr.id = addr.data.data[j].id;
            that.addrId = addr.data.data[j].id;
            sessionStorage.setItem('addrId', addr.data.data[j].id);
          }

        }
        
      }))

      .catch(function(res){
        console.log(res);
      })
    },
    // 注意事项的取消与确定
    careCancel(){
      var that = this;
      that.care.code = -1;
    },
    careSure(){
      var that = this;
      that.care.code = 1;
      var serviced = that.$root.getUrlStr('service');
      // var serviced = that.$route.params.service;

      axios.get(global.api.index.careSure,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          status: serviced,
        }
      })
      .then(function(res){
        console.log("careSure then");
        console.log(res);
      })
      .catch(function(res){
        console.log("careSure catch");
        console.log(res);
      }) 
    },
  },
}
</script>

<style scoped>
  .part {
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    padding: 1rem 0.5rem;
  }
  .part_tit{
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.5rem;
  }
  .part_tit_two{
    margin-top: 1rem;
  }
  .part_line{
    background-color: #000;
    width: 7rem;
    height: 1px;
  }
  .part_cont{
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.5rem;
  }
	/* tab小伙伴 */
	.tabTit{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		border-bottom: 1px solid #B3B3B4;
	}
	.tabTit li {
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
		height: 2rem;
		line-height: 2rem;
		color: #595757;
	}
	.tabTit li:nth-child(2){
		border-left: 1px solid #B3B3B4;
		border-right: 1px solid #B3B3B4;
	}
	.tabTit .active{
		background-color: #2ecc80;
		color: #fff;
	}
	.tabCon{
		
	}
	.list{
		padding: 0.5rem;
		border-bottom: 1px solid #B3B3B4;
	}
	.list_l{
		width: 23%;
	}
	.list_l_img{
		width: 55%;
		border-radius: 50%;
	}
	.list_l_star{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
	}
	.star{
		color: #2ecc80;
		font-size: 0.8rem;
	}
	.list_m{
		width: 52%;
	}
	.list_m_top{
		font-weight: bold;
	}
	.list_m_name{
		margin-right: 1rem;
	}
	.list_m_score{

	}
	.list_m_state{
		text-align: left;
		font-size: 0.9rem;
		padding: 0.3rem 0;
		color: #595757;
	}
	.list_m_serve{
		font-size: 0.8rem;
		color: #888888;
		margin-right: 0.5rem;
	}
	.list_m_review{
		font-size: 0.8rem;
		color: #888888;
	}
	.list_r{
		width: 25%;
	}
	.list_r_long{
		font-size: 0.85rem;
		color: #595757;
		margin-bottom: 0.4rem;
	}
	.list_r_btn{
		margin: 0;
		padding: 0;
		width: 4rem;
		height: 2.5rem;
		background-color: #2ecc80;
		color: #ffffff;
		font-size: 0.9rem;
		border-radius: 0.5rem;
		border: none;
	}
	.list_r_btn:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
  /* 下面的是注意事项，同意 */
  .alert_out{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }
  .alert{
    width: 90%;
    /*height: 12rem;*/
    position: fixed;
    top: 50%;
    left: 5%;
    margin-top: -13rem;
    z-index: 101;
    background-color: #fff;
    border-radius: 0.5rem;
  }
  .alert_cont{
    font-size: 0.9rem;
    text-align: left;
    height: 20rem;
    padding: 1rem;
    overflow: scroll;
  }
  .alert_cont p {
    line-height: 2rem;
    padding: 0 0.5rem;
  }
  .alert_sure {
    /*height: 2rem;*/
    /*line-height: 2rem;*/
    margin-top: 0.5rem;
  }
  .alert_sure input {

  }
  .alert_sure span {
    font-size: 0.95rem;
    /*line-height: 2rem;*/
  }
  .alert_btn{
    /*justify-content: space-between;
    align-items: center;*/
    height: 2rem;
    width: 100%;
    margin: 0.5rem 0;
  }
  .alert_btn button{
    /*width: 6rem;*/
    /*flex: 1;*/
    width: 50%;
    height: 2rem;
    margin: 0 auto;
    border: 0px solid red;
    color: rgba(0,0,0,0.5);
    font-size: 1rem;
    border-radius: 0.5rem;
  }
  .alert_btn .alert_confirm{
    background-color: #2ecc80;
    color: #fff;
  }
  /*.alert_btn button:first-child{
    border-right: 1px solid #fff;
  }*/
  /*敬请期待*/
  .wait{
    padding: 1rem;
    line-height: 2rem;
    font-size: 0.95rem;
  }
</style>
<style>
	ul,li,div,a,p,span{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.flex{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	.side_center{
		justify-content: space-between;
		align-items: center
	}
	.start_center{
		justify-content: flex-start;
		align-items:center;
	}
	.start_end{
		justify-content: flex-start;
		align-items: flex-end;
	}
</style>
